﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">

<title>拖拽</title>
<style>
#div1{ width:200px; height:200px; background:red; position:absolute;}
</style>
<script>
window.onload=function(){
	var oDiv=document.getElementById('div1');
	
	oDiv.onmousedown=function(ev){
		var oEvent=ev || event;
		var disX=oEvent.clientX-oDiv.offsetLeft;
		var disY=oEvent.clientY-oDiv.offsetTop;
		
		document.onmousemove=function(ev){  //直接给document加事件
			var oEvent=ev || event;
			var newLeft=oEvent.clientX-disX;
			var newTop=oEvent.clientY-disY;
			oDiv.style.left=newLeft+'px';
			oDiv.style.top=newTop+'px';	
		}
		
		oDiv.onmouseup=function(){
			document.onmousemove=null;
			oDiv.onmouseup=null;	
		}
	        return false;  //防止选中文字
	}
		
}
</script>
</head>

<body>
afdsasdfasdfasdfasdfasdfasdfasdfasdfasdfadsfadsf
<div id="div1"></div>
</body>
</html>
